Wow, the first post of the last year of the world...

In the last weeks I've discovered the importance of the semantics rules applied to the web documents (well, really I knew it before, but I had never given it the importance it has).
The html5 specification introduces some new interesting html elements which plays a leading rule in this sense. Here I speak about some of them since many and many articles may tell you the same story and probably in a better way, look at this for example.

With the older html4 and XHTML the semantic structure of the page was determined essentially by the title tag in the head of the document and by all the h1..h6 tags in the body, which all represents an headline in a descendant order. In particular if you wanted to have a semantic structure with only one external root element you had to use only one h1 element. Then you had to use the others (in descendant order) to create semantics subsections.

The html5 specification introduces some semantic elements which may be used to create more complex semantic structures, and solve some situations that couldn't be managed earlier.

The header and the hgroup tags

The header tag represents an headline. It can include the headline of the whole document, the headline of a section (see later) or of an article (see later).

The great importance of the header element, together with the hgroup element is that they allow the unification of headers which stays on the same plane, as a title and its tagline and which are not intended to give a new structure nidification. An example? The classical post headline:

Now this kind of layout results in a nested semantics structure:

Post title
|
+ Post title specification (really not a subsection!)
+ This is really a subsection

But this is semantically incorrect, or better, is not what we intended to say, we should use a non semantic element instead for the subtitle, like a p, so that the "Post title specification (really not a subsection!)" is removed from the semantic structure, but...

Whit the newer html5 we can solve this situation, grouping all the headlines together without creating a semantic subsection, and why not, we may add a time information too (always html5 ;)):

Sounds good? Now the semantic structure is simply

Post title
|
+ This is really a subsection

and the real subsections are nested and not at the same level of the post title specification.

The section tag

The section element represents a thematic grouping of content. It also generates a new semantic element in the semantic structure. But wait, such thing means that it is possible to add an h1 headline nested into a section because such h1 is not intended to be a root element, but will be nested in respect to the root h1! An example?

The resulting semantic structure will be:

My favolous book
|
+ Chapter 1

The article tag

The article element represents an independent content in a document. A content which preserves it's independent meaning even if extrapolated from the document. Examples of "articles" are the single posts which appears one after the other in a blog home page.

And so on...

There are many other new elements provided with semantic meaning, like nav (represents a navigation section, like main menus), footer (which may include copyright information, license, bibliography... respect to the ancestor content ), aside (contents interrelated with the surrounding ones), and so on...

For further and more appropriate explanations please read the official documentation or google "html5 semantic structure", since this post was only a brief introduction to the argument.

Last but not least, a link to a site which let you analyze the semantic structure of a web page, very useful if you want to implement such ideas.

Some hours ago' I've applied all these rules to this site, which now has a correct semantic structure.